<form action="/project/create-action" method="post">
    Name <input type="text" name="project_name" id="project_name"><br />
    Bugdet <input type="text" name="project_budget" id="project_budget">
    <select name="project_coin" id="project_coin">
        {foreach from=$coins item=c}
            <option value="{$c.Coin_id}">{$c.Coin}</option>
        {/foreach}
    </select><br />
    Description <textarea cols="30" rows="30" name="project_description" id="project_description"></textarea><br />
    <br />
    When is this project happening ?
    <input id="add_interval" type="button" value="Add new timeframe" />

    <div id="intervals_container"></div>

    <input type="submit" value="Add">
</form>

<script>

$(document).ready( function()
{

    function f_check_interval(  )
    {
        var i = $(this).attr( 'data-interval' );

        $('#interval_start_' + i).css( 'background-color', '#45b060' );
        $('#interval_end_' + i).css( 'background-color', '#45b060' );

        var d1 = $('#interval_start_' + i).val();
        var d2 = $('#interval_end_' + i).val();

        var d1_parts = d1.split( '-' );
        var d2_parts = d2.split( '-' );

        var utc1 = Date.UTC( d1_parts[0], d1_parts[1], d1_parts[2] );
        var utc2 = Date.UTC( d2_parts[0], d2_parts[1], d2_parts[2] );

        if ( ( utc2 <= utc1 ) || ( d1 == '' ) || ( d2 == '' ) )
        {
            $('#interval_start_' + i).css( 'background-color', '#f00' );
            $('#interval_end_' + i).css( 'background-color', '#f00' );
        }
    }

    function f_delete_interval()
    {
        var i = $(this).attr( 'data-interval' );
        $( '#interval_container_' + i ).remove();
    }

    var intervals = 0;
    $('#add_interval').click( function()
    {
        intervals++;

        var container = $('<div></div>').attr( 'id', 'interval_container_' + intervals );
        var i1 = $('<input></input>').attr( 'type', 'text' ).attr( 'id', 'interval_start_' + intervals ).attr( 'name', 'interval_start[]' ).attr( 'data-interval', intervals );
        var i2 = $('<input></input>').attr( 'type', 'text' ).attr( 'id', 'interval_end_' + intervals ).attr( 'name', 'interval_end[]' ).attr( 'data-interval', intervals );
        var delete_interval = $('<span>Delete</span>').attr( 'id', 'interval_delete_' + intervals ).attr( 'data-interval', intervals );
        i1.appendTo( container );
        i2.appendTo( container );
        delete_interval.appendTo( container );
        $( '#intervals_container' ).append( container );

        $( '#' + 'interval_start_' + intervals ).datepicker( { dateFormat: 'yy-mm-dd' } );
        $( '#' + 'interval_end_' + intervals ).datepicker( { dateFormat: 'yy-mm-dd' } );

        $( '#' + 'interval_start_' + intervals ).change( f_check_interval );
        $( '#' + 'interval_end_' + intervals ).change( f_check_interval );

        $( '#interval_delete_' + intervals ).click( f_delete_interval );
    } );
} );

</script>